
function Carousel($tagClass) {
    this.tagClass = document.querySelector($tagClass);
    this.li_list = this.tagClass.getElementsByTagName("li");
    this.ul = this.tagClass.querySelector(".img_box>ul");
    this.dot_box = this.tagClass.querySelector(".dot_box");
    this.dots = this.tagClass.querySelectorAll(".dot_box>span");
    this.index = 1;
    this.lastIndex = 1;
  };
  
  Carousel.prototype.init = function () {
    let _this = this;
    this.ul.insertBefore(this.ul.lastElementChild.cloneNode(true), this.ul.firstElementChild);
    this.ul.appendChild(this.ul.children[1].cloneNode(true));
    this.ul.style.transform = `translateX(-${this.index}00%)`;
    setTimeout(function () {
      _this.ul.style.transition = "0.2s ease-in-out";
    }, 300);
    this.dotsClick();
  };
  Carousel.prototype.limitFn = function ($limitIndex, $setIndex) {
    if (this.index === $limitIndex) {
      this.index = $setIndex;
      this.ul.addEventListener("transitionend", () => {
        this.ul.style.transition = "none";
        this.ul.style.transform = `translateX(-${this.index}00%)`;
        window.getComputedStyle(this.ul, "style").transition;
        this.ul.style.transition = "0.2s ease-in-out";
      }, {
        once: true
      });
    };
    this.dotColor();
  };
  
  Carousel.prototype.arrowLeft = function () {
    this.ul.style.transform = `translateX(-${--this.index}00%)`;
    this.limitFn(0, this.li_list.length - 2);
  };
  
  Carousel.prototype.arrowRight = function () {
    this.ul.style.transform = `translateX(-${++this.index}00%)`;
    this.limitFn(this.li_list.length - 1, 1);
  };
  
  
  
  Carousel.prototype.dotsClick = function () {
    this.dot_box.addEventListener("click", (e) => {
      if (e.target.classList.contains("dot")) {
        let dataIndex = e.target.dataset.index;
        this.index = dataIndex;
        this.ul.style.transform = `translateX(-${dataIndex}00%)`;
        this.dotColor();
      };
    });
  };
  
  Carousel.prototype.dotColor = function () {
    this.dots[this.lastIndex - 1].classList.remove("dotActive")
    this.dots[this.index - 1].classList.add("dotActive");
    this.lastIndex = this.index;
  };
  function Carousel2($tag) {
    Carousel.apply(this, [$tag]);
    this.autoPlay();
  };
  function Obj() { };
  Obj.prototype = Carousel.prototype;
  
  Carousel2.prototype = new Obj();
  
  Carousel2.prototype.autoPlay = function () {
    let time = null;
    time = setInterval(() => {
      this.arrowRight();
    }, 1000);
    this.tagClass.addEventListener("mouseenter", () => {
      clearInterval(time);
    });
    this.tagClass.addEventListener("mouseleave", () => {
      time = setInterval(() => {
        this.arrowRight();
      }, 1000);
    });
  };